<template>
  <div>
    <h1 v-if="isLoading">Loading...</h1>
    <div class="row" v-else-if="!!users.length">
      <div class="card" v-for="user in users" :key="user.id">
        <a :href="user.html_url" target="_blank">
          <img
            :src="user.avatar_url"
            style="width: 100px"
          />
        </a>
        <p class="card-text">{{user.login}}</p>
      </div>
    </div>
    <h1 v-else>请输入用户名搜索</h1>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      isLoading: false,
      users: [],
    }
  },
  mounted() {
    this.$Bus.$on('setLoading', this.setLoading)
    this.$Bus.$on('getUsers', this.getUsers)
  },
  beforeDestroy() {
    this.$Bus.$off('setLoading', this.setLoading)
    this.$Bus.$off('getUsers', this.getUsers)
  },
  methods: {
    setLoading() {
      this.isLoading = !this.isLoading
    },
    getUsers(users) {
      this.users = users
    },
  },
}
</script>

<style>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>
